import React, { useEffect, useState, useRef } from 'react';
// 引入页头组件
import Pageheader from '@/components/Pageheader';
import { Button, Table, Tag, Space, message, Input } from 'antd';
// 引入分页组件
import Mypagniation from '@/components/Mypagniation';
// 引入电影列表接口
import { cinemaslist } from '@/api/film';
const Index = () => {
  // 配置 table
  const columns = [
    {
      title: '序号',
      dataIndex: 'id', // 表示该列在数据中对应哪一个字段
      key: 'id', // 唯一索引
      align: 'center',
      render: (text) => <a>{text}</a>,
    },
    {
      title: '电影院',
      dataIndex: 'name',
      key: 'id',
      align: 'center',
    },
    {
      title: '所在城市',
      dataIndex: 'city_name',
      key: 'id',
      align: 'center',
    },
    {
      title: '所在区',
      dataIndex: 'district_name',
      key: 'id',
      align: 'center',
    },
    {
      title: '具体地址',
      dataIndex: 'address',
      key: 'id',
      align: 'center',
    },
    {
      title: '状态',
      key: 'id',
      dataIndex: 'status',
      render: (tags) => {
        // tags 就是该列数据对象中对应gender的value值
        // let color = tags;
        // let status = '暂停营业'
        // switch (color) {
        //   case '1':
        //     color = 'error'
        //     status = '暂停营业'
        //     break;
        //   case '2':
        //     color = 'success'
        //     status = '正在营业'
        //     break;
        // }
        return <Tag color={tags == 1 ? 'error' : 'success'}>
          {tags == 1 ? '暂停营业' : '正在营业'}
        </Tag>
      }
    },
  ];

  // 获取电影列表
  const [page, setPage] = useState(1)
  const [filmlist, setFilmlist] = useState([])
  // 设置总的数据条数
  const [total, setTotal] = useState(0)

  useEffect(() => {
    getfilmlistHandler({ keyword, page })
  }, [])
  // 获取数据
  const getfilmlistHandler = (params) => {
    cinemaslist(params).then(res => {
      // console.log(params)
      // console.log('电影列表', res)
      if (res.data.errNo == 0) {
        setFilmlist(res.data.paginate.data)
        setTotal(res.data.paginate.total)
      }
    })
  }

  // 
  const { Search } = Input
  // const suffix = (
  //   <AudioOutlined
  //     style={{
  //       fontSize: 16,
  //       color: '#1890ff',
  //     }}
  //   />
  // );
  const [keyword, setKeyword] = useState('')
  const onSearch = (value, event) => {
    // console.log('点击搜索', e)
    // console.log(value)
    // console.log(event)
    setKeyword(value)
    // console.log('keyword', keyword)
    getfilmlistHandler({ keyword, page })
  }

  return (
    <>
      {/* 页头标签 */}
      <Pageheader title='电影列表'>
        <Search
          placeholder="请输入影院名"
          onSearch={onSearch}
          enterButton
          style={{
            width: 200,
          }}
        />
      </Pageheader>
      {/* 展示表格数据 */}
      <Table
        columns={columns}
        pagination={false}
        dataSource={filmlist}
        rowKey={(record) => record.id}
      />
      {/* 分页组件 */}
      <Mypagniation keyword={keyword} getlistHandler={getfilmlistHandler} page={page} total={total} setPage={setPage}></Mypagniation>

    </>
  );
}

export default Index;
